<template>
	<view class="pics">
		<scroll-view class="left" scroll-y>
			<view :class="index===currentIndex?'active':''" 
				v-for="(item,index) in leftMenuData" 
				@click="tabsChange(index)" :key="index">{{item}}
			</view>
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<view class="rightItem" v-for="(item,index) in rightItemData.children" :key="index">
				<view class="title">
					<text>/</text>
						{{item.cat_name}}
					<text>/</text>
				</view>
				<view class="goods">
					<view class="item" v-for="(item1,index1) in item.children" :key="index1">
						<image @click="previewImg(item1.cat_icon)" :src="item1.cat_icon" mode=""></image>
						<view class="goods_name">{{item1.cat_name}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftMenuData:[],
				rightTotalData:[],
				rightItemData:[],
				currentIndex:0
			}
		},
		onLoad(){
			this.getShopData()
		},
		methods: {
			getShopData(){
				uni.request({
				  url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
				  success: (res) => {
						let data=res.data.message
						this.leftMenuData=data.map(item=>item.cat_name)
						this.rightTotalData=data
						this.rightItemData=data[0]
						console.log(this.rightItemData)
				  }
				});
			},
			tabsChange(index){
				this.currentIndex=index
				this.rightItemData=this.rightTotalData[index]
				console.log(this.rightItemData)
			},
			previewImg(current){
				let itemData=this.rightItemData.children
				let smallItemData=itemData.map(item=>item.children)
				let urls=[]
				for(let i=0;i<smallItemData.length;i++){
					for(let j=0;j<smallItemData[i].length;j++){
						urls.push(smallItemData[i][j].cat_icon)
					}
				}
				uni.previewImage({
					current,
					urls
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	height: 100%;
}
.pics{
	height: 100%;
	display: flex;
	.left{
		width:200rpx;
		height: 100%;
		border-right: 1px solid #eee;
		view{
			height: 60px;
			line-height: 60px;
			color:#333;
			text-align: center;
			font-size: 30rpx;
			border-top: 1px solid #eee;
		}
		.active{
			background-color: $shop-color;
			color:#fff;
		}
	}
	.right{
		.rightItem{
			margin-top: 10px;
			.title{
				display: flex;
				justify-content: center;
				text{
					color:#ccc;
					margin:0px 10px;
				}
			}
			.goods{
				display: flex;
				flex-wrap: wrap;
				.item{
					width:33%;
					height: 150rpx;
					text-align: center;
					image{
						width:60%;
						height: 60%;
					}
					.goods_name{
						font-size: 30rpx;
					}
				}
			}
		}
	}
}
</style>
